<template>
	<view style="padding: 32rpx;">
		<view class="tabs-title">
			<view :class="active==0?'active-title':''" @click="chose(0)">选择项目</view>
			<view style="margin-left: 48rpx;" :class="active==1?'active-title':''" @click="chose(1)">选择技师</view>
		</view>
		<view v-if="active==0">
			<view v-for="item in projectList" :key="item.id" class="data-item">
				<view style="line-height: 100rpx;"  @click="handleProItem(item)">{{item.name}}</view>
			</view>
		</view>
		<view v-if="active==1">
			<view v-for="item in waiterList" :key="item.id" class="data-item">
				<view style="line-height: 100rpx;" :class="waiter_id==item.id?'active-title':''"  @click="handleWaiItem(item)">{{item.name}}</view>
			</view>
			<view @click="submit()" class="tijiao">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				active: 0,
				store_id: '',
				project_id: '',
				waiter_id: '',
				reservetime: '',
				page: 1,
				projectList: [],
				waiterList: []
			};
		},
		onLoad(options) {
			console.log('options', options)
			this.store_id = options.store_id
			this.id = options.id
			this.reservetime = options.reservetime
			this.getprojectList()
		},
		methods: {
			submit() {
				let that=this
				if(this.store_id ==''){
					uni.showToast({
						title:"请选择技师"
					})
					return
				}
				let data={
					id:Number(that.id),
					store_id:Number(that.store_id),
					project_id:Number(that.project_id),
					waiter_id:Number(that.waiter_id),
					reservetime:Number(that.reservetime)
				}
				console.log('data',data)
				that.$https('sendgoods.serviceReserve', data, '请求中...').then(res => {
					if (res.code === 1) {
						uni.showToast({
							title:'提交成功',
							success() {
								uni.navigateTo({
									url:'/pages/index/courtesy/index',
								})
							}
						},30000)
					}
				});
			},
			chose(val) {
				let that = this
				console.log('val', val)
				that.active = val
				if (that.active == 0) {
					//项目
					that.waiter_id = ''
					that.getprojectList()
				}

			},
			handleProItem(item) {
				console.log('item', item)
				this.project_id = item.id
				this.active = 1
				this.getwaiterList()
			},
			handleWaiItem(item) {
				this.waiter_id = item.id
				console.log('item', item)
			},
			//获取项目列表
			getprojectList() {
				let that = this;
				let data = {
					store_id: that.store_id,
					page: that.page
				}
				that.$https('sendgoods.projectList', data, '请求中...').then(res => {
					if (res.code === 1) {
						console.log('res', res)
						that.projectList = res.data.data
					}
				});
			},
			//获取技师列表
			getwaiterList() {
				let that = this;
				let data = {
					project_id: that.project_id,
					page: that.page
				}
				that.$https('sendgoods.waiterList', data, '请求中...').then(res => {
					if (res.code === 1) {
						console.log('res', res)
						that.waiterList = res.data.data
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.active-title {
		font-weight: bold;
	}

	.tabs-title {
		display: flex;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #010101;
	}

	.data-item {
		height: 100rpx;
		border-bottom: 1px solid #E5E5E5;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	.tabs-title {
		height: 60rpx;
		border-bottom: 1px solid #E5E5E5;
	}

	.tijiao {
		min-height: 90rpx;
		margin: 0 40rpx 10rpx;
		width: calc(100% - 80rpx);
		position: fixed;
		bottom: 32rpx;
		z-index: 999;
		background: #010101;
		border-radius: 36rpx;
		color: #ffffff;
		justify-content: center;
		display: flex;
		align-items: center;
	}
</style>
